import React, { useEffect, useState } from "react";
import {
  Stepper,
  NavBar,
  Toast,
  SwipeCell,
  Button,
  SubmitBar,
  Checkbox,
  ProductCard,
} from "react-vant";
import { useAppSelector } from "../../../redux/store";
import { medicineInterface } from "@/Type/git";
import style from "./index.module.scss";
import { useDispatch } from "react-redux";
import { remove, change, checked, allchecked } from "@/redux/cartSlice";
import { useNavigate } from "react-router-dom";
import axios from "@/utils/axios.ts";

function Index() {
  const [value, setvalue] = useState(1);
  const { cartlist, allcheckedstate, allprice } = useAppSelector(
    (state) => state.cart
  );
  const dispath = useDispatch();
  const jump = useNavigate();
  const del = (id: number) => {
    dispath(remove(id));
  };
  async function payprice() {
    const {
      data: { data },
    } = await axios.get("/pay", { params: { price: allprice } });
    window.open(data);
    console.log(data);
  }

  useEffect(() => {
    const flag = cartlist?.every((item: medicineInterface) => item.checked);
    if (flag) dispath(allchecked(flag));
  },[]);

  return (
    <div>
      <NavBar
        leftText="返回"
        className={style.rvnavbar__content}
        onClickLeft={() => jump(-1)}
      />
      {cartlist?.map((item: medicineInterface) => (
        <SwipeCell
          key={item.id}
          rightAction={
            <Button
              style={{ height: "100%" }}
              square
              onClick={() => del(item.id)}
              type="danger"
            >
              删除
            </Button>
          }
        >
          <ProductCard
            num={item.num}
            price={item.price}
            desc={item.desc}
            title={item.title}
            thumb={
              <Checkbox
                checked={item.checked}
                onChange={(val) => {
                  dispath(checked({ id: item.id, checked: val }));
                }}
              >
                <img src={item.img} className={style.cartimg} alt="" />
              </Checkbox>
            }
            footer={
              <>
                <Stepper
                  min={1}
                  value={item.num}
                  onChange={(v) => {
                    dispath(change({ id: item.id, num: v }));
                  }}
                />
              </>
            }
          />
        </SwipeCell>
      ))}
      <div className={style.demosubmitbar}>
        <SubmitBar
          price={allprice * 100} // 总价
          buttonText="提交订单"
          onSubmit={() => {
            Toast("提交订单");
            payprice();
          }}
          tip={
            allcheckedstate ? (
              <>药品不支持7天无理由退换货。如有处方药,请凭处方单购买</>
            ) : (
              ""
            )
          }
        >
          <Checkbox
            checked={allcheckedstate}
            onChange={(val) => {
              dispath(allchecked(val));
            }}
          >
            全选
          </Checkbox>
        </SubmitBar>
      </div>
    </div>
  );
}

export default Index;
